<template>
    <div class="home-header">
      <img class="img" src="../../assets/img/top-left.png" alt="">
      <div class="title-box">
        <div class="home-title">龙游农商行运营大脑OS</div>
        <div class="home-time">{{time}}</div>
      </div>
      <img class="img" src="../../assets/img/top-right.png" alt="">
      <img class="right-top-img" src="../../assets/img/right-top.png" alt="">
    </div>
</template>

<script>
import moment from 'moment'
import { mapMutations } from 'vuex'
export default {
  name: 'HomeHeader',
  data () {
    return {
      timer: null,
      time: moment().format('YYYY.MM.DD HH:mm:ss'),
      num: 0
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    ...mapMutations(['setCount']),
    init () {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
        this.num = 0
      }
      // 每两秒钟刷新下数据
      this.timer = setInterval(() => {
        this.time = moment().format('YYYY.MM.DD HH:mm:ss')
        this.num++
        if ((this.num % 2) === 0) {
          this.setCount(Math.random())
        }
      }, 1000)
    }
  }
}
</script>
<style lang="less">
  .home-header {
    position: relative;
    overflow: hidden;
    display: flex;
    padding: 10px;
    justify-content: space-around;
    .right-top-img {
      position: absolute;
      right: 0;
      bottom: 0;
    }
    .img {
      width: 40%;
    }
    .title-box {
      width: 300px;
    }
    .home-title {
      white-space: nowrap;
      line-height: 50px;
      font-size: 28px;
      text-align: center;
      color: #40FFE6;
      display: flex;
      justify-content: center;
      letter-spacing: 10px;
    }
    .home-time {
      background: url('../../assets/img/react.png');
      background-size: 100% 100%;
      white-space: nowrap;
      line-height: 30px;
      font-size: 18px;
      text-align: center;
      color: #ccc;
    }
  }
</style>
